<template>
  <div class="transition">
    <el-button type="primary" @click="cutFade">切换cutFade </el-button>
    <el-button type="primary" @click="cutFade1">切换cutFade1 </el-button>

    <!-- transition props 可以自定义过渡类名 
    *  enter-from-class 
    *  enter-active-class
    *  enter-to-class 
    *  leave-from-class 
    *  leave-active-class 
    *  leave-to-class -->
    <!-- 
        animate 4.0已上需要加上类名animate__animated
     -->
    <h3>
      <a href="https://animate.style/">animate.css动画使用</a>
    </h3>
    <p>
      npm install animate.css --save
      <br />
      yarn add animate.css
    </p>
    <p>import 'animate.css';</p>
    <h2>#### animate 4.0以上需要加上类名 <strong>animate__animated</strong></h2>
    <transition
      :duration="{ enter: 50, leave: 300 }"
      enter-active-class="animate__animated animate__fadeInDownBig"
      leave-active-class="animate__animated animate__bounceOutUp"
    >
      <div class="ball1" v-show="flag1"></div>
    </transition>

    <transition name="fade">
      <div class="ball" v-show="flag"></div>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import "animate.css";
const flag = ref<boolean>(true);
const flag1 = ref<boolean>(true);
const cutFade = () => {
  flag.value = !flag.value;
};
const cutFade1 = () => {
  flag1.value = !flag1.value;
};
</script>
<style lang="less" scoped>
.transition {
  height: 600px;
  width: 800px;
  margin: 0 auto;
  margin-top: 50px;
  padding: 30px;
  background: coral;
  .ball {
    height: 200px;
    width: 200px;
    background: springgreen;
  }
  .ball1 {
    height: 300px;
    width: 300px;
    background: red;
  }
  /* 
  -----------------显示进场动画-----------
 */

  .fade-enter-from {
    height: 0;
    width: 0;
    transform: rotate(360deg);
  }
  .fade-enter-active {
    transition: all 2s ease;
  }
  .fade-enter-to {
    height: 200px;
    width: 200px;
  }
  /* 
 -----------------显示进场动画-----------
 */

  /* 
  -----------------盒子退场动画-----------
 */

  .fade-leave-from {
    height: 200px;
    width: 200px;
    transform: rotate(360deg);
  }
  .fade-leave-active {
    transition: all 3s ease;
  }
  .fade-leave-to {
    height: 0;
    width: 0;
  }
  /* 
 -----------------盒子退场动画-----------
 */
}
</style>
